<template>
    <div class="learn-status white-bg">
        <navbar :title="$t('course_status')"></navbar>
        <div class="modal-title">
            <p>
                <span class="title-value color666"
                      v-if="learnStatu.courseStatus === null">{{ $t('cos_app_not_started') }}</span>
                <span class="title-value process"
                      v-if="learnStatu.courseStatus === 'I'">{{ $t('cos_app_inprogress') }}</span>
                <span class="title-value complete"
                      v-if="learnStatu.courseStatus === 'C'">{{ $t('cos_app_completed') }}</span>
                <span class="title-value color666"
                    v-if="learnStatu.courseStatus === 'W'">{{ $t('cos_app_withdrawn') }}</span>
              <span class="title-value process"
                    v-if="learnStatu.courseStatus === 'F'">{{ $t('cos_app_fail') }}</span>
                <span class="color999">{{$t('cos_app_myStatus')}}</span>
            </p>
            <p>
                <span class="title-value">{{ learnStatu.totalTime }}</span>
                <span class="color999">{{ $t('cos_app_lengthofstudy')}}</span>
            </p>
            <p>
                <span class="title-value">{{ learnStatu.passScore }}</span>
                <span class="color999">{{ $t('cos_app_scorerequired') }}</span>
            </p>
            <p>
                <span class="title-value noboder catalog-active">{{ learnStatu.courseScore }}</span>
                <span class="color999">{{ $t('cos_app_totalcoursescore') }}</span>
            </p>
        </div>
        <div class="module-list">
            <h2 class="h2">{{ $t('cos_app_moduleRequir') }}</h2>
            <span class="color999 tip">({{ $t('cos_app_tips5') }})</span>
            <template v-if="learnStatu.moduleRecordList && learnStatu.moduleRecordList.length > 0">
                <div class="modal-item" v-for="(item, i) in learnStatu.moduleRecordList" :key="i">
                    <div class="accTitle-left">
                        <i class="icon999" :class="item.iconType"></i>
                        <span>{{ item.resTitle }}</span>
                    </div>
                    <div class="accTitle-right" v-if="item.claimCondition !== 'UNLIMITED'">
                    <span v-if="item.modType === 'ASS' || item.modType === 'ACE' || item.modType === 'TST' || item.modType === 'DXT'">{{item.claimCondition === 'IFCP' ? $t('button_submit') : $t('cos_app_pass') }} /</span>
                        <span v-else>{{item.claimCondition === 'IFCP' ? $t('cos_app_checked') : $t('cos_app_completed') }} /</span>
                        <span v-if="item.isMeet" class="completed">{{ $t('cos_app_satisfied') }}</span>
                        <span v-else class="uncompleted">{{ $t('cos_app_unsatisfied') }}</span>
                    </div>
                    <div class="accTitle-right" v-else>
                        <span>{{ $t('cos_app_noNeed') }}</span>
                    </div>
                </div>
            </template>
            <template v-if="learnStatu.scoreRecordList && learnStatu.scoreRecordList.length > 0">
                <div class="modal-item" v-for="(item, i) in learnStatu.scoreRecordList" :key="'scoreRecordList' + i">
                    <div class="accTitle-left">
                        <i class="icon999" :class="item.iconType"></i>
                        <span>{{ item.resTitle }}</span>
                    </div>
                    <div class="accTitle-right" v-if="item.cmtStatus !== 'UNLIMITED' && item.cmtStatus !== null">
                        <span>{{item.cmtStatus === 'IFCP' ? $t('need_submit') : $t('cos_app_pass')}}/</span>
                        <span v-if="item.isMeet" class="completed">{{$t('cos_app_satisfied')}}</span>
                        <span v-else class="uncompleted">{{$t('cos_app_unsatisfied')}}</span>
                    </div>
                    <div class="accTitle-right" v-else>
                        <span>{{ $t('cos_app_noNeed') }}</span>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
export default {
    name: 'LearningStatusNew',
    data() {
        return {
            learnStatu: {}
        };
    },
    methods: {
        getStatusInfo() {
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/course/learner/record',
                params: {
                    tkhId: this.$route.params.tkhId,
                    itmId: this.$route.params.itmId
                }
            }).then((res) => {
                this.learnStatu = res.data;
            });
        }
    },
    mounted() {
        this.getStatusInfo();
    }
};
</script>

<style lang="less" scoped>

.learn-status{
    min-height: 100vh;
    .learn-status-title{
        font-size: 16px;
    }
    .modal-title{
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        padding-top: 80px;
        justify-content: space-around;
        margin-bottom: 40px;
        p{
            display: flex;
            flex-direction: column;
            text-align: center;
            border-left: 1px solid #ddd;
            width: 100%;
            height: 50px;
            justify-content: space-between;
            &:first-child{
                border-left: none;
            }
        }
    }
    .module-list{
        padding: 0px 10px;
        .h2{
            font-size: 18px;
            margin-bottom: 5px;
            padding: 0px 0px 0px 10px;
            border-left: 4px solid #00aeef;
            height: 18px;
            line-height: 18px;
        }
        .tip{
            font-size: 12px;
            display: block;
        }
        .modal-item{
            margin-top: 20px;
            display: flex;
            flex-wrap: nowrap;
            background-color: #F9F8F8;
            padding: 10px;
            border-radius: 4px;
            color: #333333;
            justify-content: space-between;
            .completed {
                color: #075ebb;
            }
        }
    }
    .color999{
        color: #999999;
    }
    .complete {
        color: #999999;
    }
    .process {
        color: #00ba5f;
    }
    .color666 {
        color: #666666;
    }
    .uncompleted {
        color: #fb6d0e;
    }
}
</style>
